<script setup lang='ts'>

import router from '@/router';
import { ref } from 'vue';
import { addManagement, delManagement, editManagement, getManageList } from '@/views/psychology/heart/management/managementList';
import { ElMessage, ElMessageBox } from 'element-plus';
// 未知区域
// manageId.value = res.rows.id;
// const manageId = ref('');


// 详情
function toDetails(data) {
    router.push({ path: '/heartDetails', query: data });
}

// 设置
function toSet(data) {
    router.push({ path: '/setupmgnt', query: data });
}

// 分页
const total = ref(0);

// 表格
const tableData = ref([]);
const manageList = ref({
    name: '',
    pageNum: 1,
    pageSize: 10
});

function details() {
    getManageList(manageList.value).then(res => {
        console.log(res);
        tableData.value = res.rows;
        tableData.value.map(item => {
            return item.enable === '0' ? item.enable = '停用' : item.enable = '正常';
        });
        console.log(tableData.value);
        total.value = res.total;
        selectList.value = res.rows;
    });
}

// 初始化
details();
// 编辑

const editData = ref({
    enable: '',
    id: null,
    name: ''

});
//添加
const addVisible = ref(false);


//数据
const data = ref({
    name: '',
    enable: ''
});

function changeRadio(value) {
    console.log(value);
    editData.value.enable = value;
}

const addManage = () => {
    console.log(data.value.enable);
    addManagement(data.value).then(res => {
        console.log(res);
        details();
        addVisible.value = false;
    });
    ElMessage({
        message: '添加成功.',
        type: 'success'
    });
    data.value.name = '';
};
// 删除
const del = (data) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '已删除'
            });
            delManagement(data.id).then(res => {
                details();
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};

// 下拉框
const selectList = ref('');

function optionSearch(id: string) {
    console.log(id);
    selectList.value.id = id;
    details();
}


const editVisible = ref(false);

// 编辑保存按钮
function editor(data) {
    console.log(data);
    editVisible.value = true;
    // editData.value = data;
    editData.value.id = data.id;
}

function editorSave() {
    editManagement(editData.value).then(res => {
        console.log(res);
    });
    details();
    editData.value.name = '';
    editVisible.value = false;
}


</script>

<template>
    <div class='container'>
        <!--搜索框-->
        <div class='faceImage'>
            <span><b>测评名称</b></span>
            <el-select
                v-model='selectList.id'
                filterable
                placeholder='学院名称'
                style='width: 240px'
            >
                <el-option
                    v-for='item in selectList'
                    :key='item.id'
                    :value='item.id'
                    :label='item.name'
                    @click='optionSearch(item.id)'
                />
            </el-select>
        </div>
        <!--添加按钮-->
        <el-button v-hasPermi="['psychology:heart:add']" type='primary' @click='addVisible=true'>添加</el-button>
        <el-dialog v-model='addVisible' title='添加' width='800' align='center'>
            <!--内容-->
            <span><b>测评名称</b></span>
            <el-input
                v-model='data.name'
                style='width: 600px'
                maxlength='20'
                placeholder='请输入测评名称'
                show-word-limit
                type='text'
            />
            <div class='status'>
                <span><b>状态</b></span>
                <el-radio-group v-model='data.enable' class='ml-4'>
                    <el-radio value='是' label='是' size='large'>正常</el-radio>
                    <el-radio value='否' label='否' size='large'>停用</el-radio>
                </el-radio-group>
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='addVisible = false'>取消</el-button>
                    <el-button type='primary' @click='addManage'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--表格-->
        <div id='table'>
            <el-table :data='tableData' style='width: 100%' border>
                <el-table-column fixed label='序号' type='index' width='200' align='center' />
                <el-table-column prop='name' label='测评名称' align='center' />
                <el-table-column prop='createTime' label='创建时间' width='250' align='center' />
                <el-table-column prop='enable' label='状态' width='200' align='center' />
                <el-table-column fixed='right' label='操作' width='250' align='center'>
                    <template #default='scope'>
                        <el-button v-hasPermi="['psychology：details']" link type='primary' size='small' @click='toDetails(scope.row)'
                        >详情
                        </el-button
                        >
                        <el-button v-hasPermi="['psychology:heart:edit']" link type='primary' size='small' @click='editor(scope.row)'>编辑</el-button>
                        <el-button link type='primary' size='small' @click='toSet(scope.row)'>设置</el-button>
                        <el-button v-hasPermi="['psychology:heart:move']" link type='primary' size='small' @click='del(scope.row)'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--编辑-->
        <el-dialog v-model='editVisible' title='编辑' width='800' align='center'>
            <!--内容-->
            <span><b>测评名称</b></span>
            <el-input
                v-model='editData.name'
                style='width: 600px'
                maxlength='20'
                placeholder='请输入测评名称'
                show-word-limit
                type='text'
            />
            <div class='status'>
                <span><b>状态</b></span>

                <el-radio-group v-model='editData.enable' class='ml-4' @change='changeRadio'>
                    <el-radio value='是' label='是' size='large'>正常</el-radio>
                    <el-radio value='否' label='否' size='large'>停用</el-radio>
                </el-radio-group>
            </div>
            <!--底部-->
            <template #footer>
                <div class='dialog-footer' align='center'>
                    <el-button @click='editVisible = false'>取消</el-button>
                    <el-button type='primary' @click='editorSave'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--分页-->
        <div id='page'>
            <el-pagination
                v-model:current-page='manageList.pageNum'
                v-model:page-size='manageList.pageSize'
                background
                layout='prev, pager, next'
                :total=total
                @currentChange='details'
            />
        </div>
    </div>

</template>

<style scoped lang='scss'>

.status {
    width: 740px;
    display: flex;
    justify-content: left;
}

.faceImage {
    margin: 20px 0;

    span {
        width: 80px;
    }
}

.content {
    display: flex;
}

.addTitle,
.left {
    display: flex;
    justify-content: space-between;


}

span {
    display: inline-block;
    font-size: 15px;
    width: 110px;
    line-height: 32px;
}

.el-form-item {
    display: flex;
    //line-height: 32px;
}

#table {
    margin: 20px 0;
}

#page {
    display: flex;
    justify-content: right;
}

.container {
    padding: 20px;
}

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
